<template>
	<div class="heightMax order flexPublic" v-loading='tableLoading'>
		<div class="roleTopBox">
			<el-row>
				<el-col :span="7">
					<span class="font14">设备注册代码：</span>
					<el-input v-model.trim="keyWords" @keyup.enter.native="getTableList(1)" placeholder="请输入设备注册代码" clearable size="mini"
					 class='speInput'></el-input>
				</el-col>
				<el-col :span="2">
					<el-button type="primary" icon="el-icon-search" size="mini" @click='getTableList(1)'>搜索</el-button>
					<el-button icon="el-icon-delete" size="mini" @click='reset'>重置</el-button>
				</el-col>
			</el-row>
		</div>
		<div class="roleBottomBox">
			<div class="listName">
				<i></i><span class="font14">电梯列表</span>
			</div>
			<div class="tableBox">
				<vueScroll>
					<el-table :data="tableData" highlight-current-row ref="moviesTable" @row-click="rowClick" @selection-change="selectChange"
					 style="width: 100%" border header-row-class-name='tableHeader'>
						<el-table-column type="index" class="over" fixed>
						</el-table-column>
						<el-table-column type="selection" min-width="50" fixed>
						</el-table-column>
						<el-table-column label="设备注册代码">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.register_code" placement="top">
									<span class="speSpan">{{scope.row.register_code}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="96333编号">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.num" placement="top">
									<span class="speSpan">{{scope.row.num}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="使用地点">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.installation_place" placement="top">
									<span class="speSpan">{{scope.row.installation_place}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="使用单位">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.property_company_name" placement="top">
									<span class="speSpan">{{scope.row.property_company_name}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="维保单位">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" :content="scope.row.maintain_company_name" placement="top">
									<span class="speSpan">{{scope.row.maintain_company_name}}</span>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<span class=" font13 cursor eleBlueColor" style="margin-right: 10px;" @click="goDiagnose(scope.row.id, scope.row.register_code, scope.row.installation_place, scope.row.manufacturer_company_name,scope.row.last_checkup_score,scope.row.last_checkup_time)">诊断</span>
								<span class="font13 cursor eleBlueColor" @click="goDetail(scope.row.status_id,scope.row.register_code,scope.row.installation_place,scope.row.property_company_name,scope.row.button_display)">查看</span>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页器 -->
					<div class="pag">
						<el-pagination :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
						 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
						</el-pagination>
					</div>
				</vueScroll>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		AllLoading
	} from "@/common.js";
	export default {
		activated() {
			// this.getTableList()
		},
		mounted() {
			this.getTableList()
		},
		data() {
			return {
				keyWords: '',
				tableData: [{
					name: '假数据1'
				}, {
					name: '假数据2'
				}],
				page: 1,
				page_size: 10,
				total: 0,
				tableLoading: false,
				checkArr: [],
				currentId: '',
				pidsArr: [],
			}
		},
		computed: {
			role() {
				if (localStorage.role) {
					return JSON.parse(localStorage.role).id
				} else {
					return ''
				}
			},
		},
		methods: {
			//获取列表数据
			getTableList(val) {
				if (val) {
					this.page = 1
					this.page_size = 10
				}
				this.tableLoading = true
				let params = {
					page: this.page,
					page_size_count: this.page_size,
					key_words:this.keyWords
				}
				axiosGet('/sta/checkup/elevator/', params, (res) => {
					this.tableLoading = false
					this.total = res.detail.count
					this.tableData = res.detail.results
				})
			},
			//重置
			reset() {
				this.keyWords = ''
				this.page = 1
				this.page_size = 10
				this.getTableList()
			},
			//单行点击
			rowClick(row, column) {
				this.$refs.moviesTable.toggleRowSelection(row)
			},
			//多选变化
			selectChange(res) {
				if (res.length == 1) {
					this.checkArr = res
					this.currentId = this.checkArr[0].id
				}
			},
			//每页数量变化
			handleSizeChange(size) {
				this.page_size = size
				this.getTableList()
			},
			//页数变化
			handleCurrentChange(page) {
				this.page = page
				this.getTableList()
			},
			goDiagnose(id, register_code, installation_place, manufacturer_company_name, last_checkup_score, last_checkup_time) {
				let obj = {
					newLabel: '电梯诊断分析详情',
					index: '/MainView/ElevatorStatistics/Diagnose'
				}
				this.$store.commit('ADDTAB', obj)
				this.$router.push({
					name: 'Diagnose'
				})
				localStorage.diagnoseId = JSON.stringify({
					id: id
				})
				localStorage.diaRegister_code = JSON.stringify({
					name: register_code
				})
				localStorage.diaInstallation_place = JSON.stringify({
					name: installation_place
				})
				localStorage.diaProperty_company_name = JSON.stringify({
					name: manufacturer_company_name
				})
				localStorage.last_checkup_score = JSON.stringify({
					point: last_checkup_score
				})
				localStorage.last_checkup_time = JSON.stringify({
					time: last_checkup_time
				})
			},
			goDetail(id, register_code, installation_place, property_company_name,button_display) {
				let obj = {
					newLabel: '运行实时监控详情',
					index: '/MainView/RealTimeElevatorMonitoring/MonitoringDetails',
				}
				localStorage.liftDetailId = JSON.stringify({
					id: id
				})
				localStorage.register_code = JSON.stringify({
					id: register_code
				})
				this.$store.commit('ADDTAB', obj)
				this.$router.push({
					name: 'MonitoringDetails',
				})
				if(register_code && button_display === '1'){
					let data = {
						register_code: register_code
					}
					axiosGet('/manu/elevator/request/',data,(res)=>{
						if(res.code == 0){
							
						}else{
							this.$message.error(res.detail.result)
						}
					})
				}
				if (!id) {
					localStorage.currentInstallation_place = JSON.stringify({
						name: installation_place
					})
					localStorage.currentproperty_company_name = JSON.stringify({
						name: property_company_name
					})
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.el-row {
		width: 100%;
		margin-bottom: 0 !important;
	}

	.el-col {
		display: flex;
		align-items: center;

		span {
			float: left;
		}
	}

	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		height: 25px;
		align-items: center;

		i {
			width: 3px;
			height: 60%;
			background: #2d8cf0;
			margin: 10px 5px;
			margin-left: 0;
		}

	}

	.el-select {
		width: 60% !important;
	}

	.speInput {
		width: 65% !important;
	}
</style>
